<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }
    </style>
</head>

<body>

    <div id="box">

    </div>

</body>
<script>

    /*
     1. es6 里面的箭头的 this 是静态的（箭头函数声明完毕，this确定，而不是像es5里面 this 是动态的）
     2. this 始终指向当前函数声明时候的作用域下的this
    */

    var username = 'windowUserName';


    /* 普通函数 */
    function print1UserName() {
        console.log(this.username);
    }

    /* 由于这个函数是在window全局内声明的，那么这个this永远都是 window对象 */
    const print2UserName = () => {
        console.log(this.username);
    }

    // print1UserName();
    // window.print1UserName();

    // print2UserName();

    /* 手工的改变this */
    const obj = {
        username: 'mark'
    }
    print1UserName.call(obj);

    print2UserName.call(obj); // windowUserName




</script>

</html>